<template>
  <div>
    <!--搜索医疗机构筛选表单-->
    <el-form :inline="true" align="center">
      <!--医疗机构选择器-->
      <el-form-item>
        <template slot="label">
          <el-tooltip placement="bottom" style="margin-right: 5px">
            <div slot="content">没有找到您的医疗机构？请联系管理员</div>
            <i class="el-icon-question icon-color"></i>
          </el-tooltip>
          <span>医疗机构代码：</span>
        </template>
        <HospitalSearch style="width: 100%"></HospitalSearch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="load">显示医生人数</el-button>
      </el-form-item>
    </el-form>
    <div id="echart" style="width: 100%;height: 600px"></div>
  </div>
</template>

<script>
import HospitalSearch from "@/components/HospitalSearch";

export default {
  name: "ReportList",
  components: {HospitalSearch},
  data(){
    return{
      hcode:''
    }
  },
  created() {
    this.$bus.$on('transferHcode',(data)=>{
      console.log('我是hsearch组件，收到了数据',data)
      this.hcode = data
    })
  },
  mounted() {
  },
  methods: {
    load() {
      this.request.get("/hospital/getChart/"+this.hcode)
          .then(res=>{
            // console.log(hcode)
            this.x = res.data.data.xseries
            this.y = res.data.data.yseries
          })
      setTimeout(() =>{
        this.openEchart()
      },100)
    },



//echart折线图
    openEchart(){
      let myChart = this.$echarts.init(document.getElementById("echart"));
      // 指定图表的配置项和数据
      let option = {
        xAxis: {
          type: 'category',
          data: this.x
        },
        yAxis:{
          type:"value"
        },
        series:[
          {
            data:this.y,
            type:'line',
            itemStyle:{
              normal:{
                label : {
                  show: true // 在折线拐点上显示数据
                },
              }
          }}
        ]
      }

      this.$nextTick(() => {
        myChart.setOption(option, true);
      })

    },

  },

  beforeDestroy() {
    this.$bus.$off('transferId')
    this.$bus.$off('transferHcode')
  },
}

</script>

<style scoped>


</style>